import React, { Component } from 'react';

import * as actions from '../redux/actions';

class App extends Component {
	constructor(props) {
		super(props);
		this.increment = this.increment.bind(this);
		this.subtract = this.subtract.bind(this);
		this.incrementIfOdd = this.incrementIfOdd.bind(this);
		this.incrementAsync = this.incrementAsync.bind(this);
	}

	increment() {
		const number = this.select.value * 1
		this.props.store.dispatch(actions.increment(number))
	}

	subtract() {
		const number = this.select.value * 1
		this.props.store.dispatch(actions.subtract(number))
	}
	incrementIfOdd() {
		let count = this.props.store.getState()
		const number = this.select.value * 1
		if (count % 2 === 1) {
			this.props.store.dispatch(actions.increment(number))
		}
	}

	incrementAsync() {
		const number = this.select.value * 1
		setTimeout(() => {
			this.props.store.dispatch(actions.increment(number))
		}, 1000)
	}


	render() {
		const count = this.props.store.getState()
		return (
			<div>
				<p>click {count} times</p>
				<div>
					<select ref={select => this.select = select}>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
					</select>
					<button onClick={this.increment}>+</button>
					<button onClick={this.subtract}>-</button>
					<button onClick={this.incrementIfOdd}>increment if oddd</button>
					<button onClick={this.incrementAsync}>imcrment async</button>
				</div>
			</div>
		);
	}
}

export default App;